// import React, { Component } from 'react'
// import '../assets/css/home.css'
// import { Link } from 'react-router-dom'
// import { CapsuleTabs, ProgressBar } from 'antd-mobile'
// import { getNew, getSeckill, getIndexgoods, getGroupon } from '../request/api'
// export default class home extends Component {
//     constructor() {
//         super()
//         this.state = {
//             getnew: [], //新人专属
//             getseckill: [], //秒杀
//             //首页商品信息
//             goodslist1: [],
//             goodslist2: [],
//             goodslist3: [],
//             goodslist4: [],
//             // 万人团
//             getgroupon: []
//         }
//     }
//     componentDidMount() {
//         //新人专属
//         getNew().then(res => {
//             // console.log(res, '新人专享');
//             if (res.code === 200) {
//                 this.setState({
//                     getnew: res.list
//                 })
//             }
//         })
//         //秒杀
//         getSeckill().then(res => {
//             // console.log(res, '秒杀');
//             if (res.code === 200) {
//                 this.setState({
//                     getseckill: res.list
//                 })
//             }
//         })
//         //首页商品信息
//         getIndexgoods().then(res => {
//             // console.log(res, '首页商品信息');
//             if (res.code === 200) {
//                 this.setState({
//                     goodslist1: res.list[0].content,
//                     goodslist2: res.list[1].content,
//                     goodslist3: res.list[2].content,
//                     goodslist4: res.list[3].content
//                 })
//             }
//         })
//         // 万人团
//         getGroupon().then(res => {
//             // console.log(res, '万人团');
//             if (res.code === 200) {
//                 this.setState({
//                     getgroupon: res.list
//                 })
//             }
//         })
//     }
//     render() {
//         const { goodslist1, goodslist2, goodslist3, goodslist4, getnew, getseckill, getgroupon } = this.state
//         return (
//             <div id='Home'>
//                 <header>
//                     <div className='header-top'>
//                         <img src={require('../assets/images/logo.png')} alt="" />
//                         <input type="text" className='iconfont' placeholder='&#xe6d1; 搜索商品' />
//                         <div className="sousuo">
//                             搜索
//                         </div>
//                         <i className='dingwei iconfont icon-position'></i>
//                     </div>
//                     <div className="header-bot">
//                         <div className="top">
//                             <h1>新人专属</h1>
//                             <div>
//                                 <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
//                             </div>
//                             <span>查看全部 <i className='iconfont icon-arrow-right'></i> </span>
//                         </div>
//                         <div className="center">
//                             <p>
//                                 <span>1重礼</span>
//                                 <span>信任特价商品专区</span>
//                                 <span>（限量供应，先到先得）</span>
//                             </p>
//                             <ul>
//                                 {
//                                     getnew.map(item => {
//                                         return <li key={item.id}>
//                                             <img src={item.img} alt="" />
//                                             <div className="price">
//                                                 <div>
//                                                     <p>￥{item.price}</p>
//                                                     <del>￥{item.market_price}</del>
//                                                 </div>
//                                                 <div className="round iconfont icon-gouwuche"></div>
//                                             </div>
//                                         </li>
//                                     })
//                                 }

//                             </ul>
//                         </div>
//                         <div className="bot">
//                             <p>
//                                 <span>2重礼</span>
//                                 <span>新人通用50元礼券</span>
//                                 <span>（下单立减，省了又省）</span>
//                             </p>
//                             <img className='img1' src={require('../assets/images/已领取.png')} alt="" />
//                             <img className='img2' src={require('../assets/images/下单后可得.png')} alt="" />
//                         </div>
//                     </div>
//                 </header>
//                 <div className="header-bot1">
//                     <div className="top1">
//                         <h1>万人团</h1>
//                         <div>
//                             <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
//                         </div>
//                         <span>查看全部 <i className='iconfont icon-arrow-right'></i> </span>
//                     </div>
//                     <div className="center1">
//                         <p>
//                             <span>万人团</span>
//                             <span>信任特价商品专区</span>
//                             <span>（限量供应，先到先得）</span>
//                         </p>
//                         <ul>
//                             {
//                                 getgroupon.map(item => {
//                                     return <li key={item.id}>
//                                         <Link to='/detail' state={{ id: item.id, type: 2 }}>
//                                             <img src={item.img} alt="" />
//                                             <div className="price">
//                                                 <div>
//                                                     <p>￥{item.price}</p>
//                                                     <del>￥{item.market_price}</del>
//                                                 </div>
//                                                 <div className="round iconfont icon-gouwuche"></div>
//                                             </div>
//                                         </Link>
//                                     </li>
//                                 })
//                             }
//                         </ul>
//                     </div>
//                 </div>
//                 <div className="content">
//                     <div className="gird">
//                         <ul>
//                             <li>
//                                 <img src={require('../assets/images/限时抢购.png')} alt="" />
//                                 <p>限时秒杀</p>
//                             </li>
//                             <li>
//                                 <img src={require('../assets/images/畅销商品.png')} alt="" />
//                                 <p>畅销商品</p>
//                             </li>
//                             <li>
//                                 <img src={require('../assets/images/品质大牌.png')} alt="" />
//                                 <p>品质大牌</p>
//                             </li>

//                             <li>
//                                 <img src={require('../assets/images/小u自营.png')} alt="" />
//                                 <p>小U自营</p>
//                             </li>
//                             <li>
//                                 <img src={require('../assets/images/积分兑换.png')} alt="" />
//                                 <p>积分商城</p>
//                             </li>

//                         </ul>
//                     </div>
//                     <div className="super">
//                         <div className="top">
//                             <h1>超级秒杀</h1>
//                             <div>
//                                 <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
//                             </div>
//                         </div>
//                         <div className="bot">
//                             <div className="left">
//                                 <img src={require('../assets/images/分类4.png')} alt="" />
//                             </div>
//                             <div className="right">
//                                 <span className='zhe'>7.9折</span>
//                                 <p className='p1'>溪牧原山茶花洁面乳精选太行山最优质……</p>
//                                 <div className='p2'>
//                                     <ProgressBar
//                                         percent={30}
//                                         style={{
//                                             '--fill-color': '#FF6243',
//                                             '--track-color': '#FFBDAC',
//                                         }}
//                                     />
//                                     <div className='sp2'>每人限购1件</div>
//                                 </div>
//                                 <div className="qiang">
//                                     <p>￥29.99</p>
//                                     <del>69.9</del>
//                                     <div className='msq'>
//                                         馬上抢
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                     </div>
//                     <div className="center">
//                         <p>
//                             <span>限时秒杀</span>
//                             <span>信任特价商品专区</span>
//                             <span>（限量供应，先到先得）</span>
//                         </p>
//                         <ul>
//                             {
//                                 getseckill.map(item => {
//                                     return <li key={item.id}>
//                                         <img src={item.img} alt="" />
//                                         <div className="price">
//                                             <div>
//                                                 <p>￥{item.price}</p>
//                                                 <del>￥{item.market_price}</del>
//                                             </div>
//                                             <div className="round iconfont icon-gouwuche"></div>
//                                         </div>
//                                     </li>
//                                 })
//                             }
//                         </ul>
//                     </div>
//                     <div className="pre">
//                         <div className="pre-title">
//                             <p>双11尖货预购</p>
//                             <p>畅购全球</p>
//                         </div>
//                         <div className="pre-img">
//                             <img src={require('../assets/images/双11.png')} alt="" />
//                             <img src={require('../assets/images/畅购1.png')} alt="" />
//                             <img src={require('../assets/images/畅购2.png')} alt="" />
//                         </div>
//                     </div>
//                     <nav className="head-nav">
//                         <ul>
//                             <li>
//                                 <Link to='/catelist'>综合推荐</Link>
//                             </li>
//                             <li>销量</li>
//                             <li>价格<i className='iconfont icon-jiage'></i></li>
//                             <li>好评</li>
//                             <li>店铺</li>
//                             <li><i className="iconfont icon-gengduo1"></i>分类</li>
//                         </ul>
//                     </nav>
//                     <CapsuleTabs className='cap'>
//                         <CapsuleTabs.Tab title='热销好货' key='one'>
//                             {
//                                 goodslist1.map(item => {
//                                     return <div className="goods" key={item.id}>
//                                         <Link to='/detail' state={{ id: item.id, type: 1 }}>
//                                             <div className="left">
//                                                 <img src={item.img} alt="" />
//                                             </div>
//                                             <div className="right">
//                                                 <span className='zhe'>7.9折</span>
//                                                 <p className='p1'>{item.goodsname}</p>
//                                                 <p className='pp'>{item.description}</p>
//                                                 <div className='p2'>
//                                                     <div className='div1'>
//                                                         <div className='div2'>直降198</div>
//                                                         <p>限购1件</p>
//                                                     </div>
//                                                     <div className="price">
//                                                         <div>
//                                                             <p>￥{item.price}</p>
//                                                             <del>￥{item.market_price}</del>
//                                                         </div>
//                                                         <div className="addshop">
//                                                             加入购物车
//                                                         </div>
//                                                     </div>
//                                                 </div>
//                                             </div>
//                                         </Link>
//                                     </div>
//                                 })
//                             }
//                         </CapsuleTabs.Tab>
//                         <CapsuleTabs.Tab title='折上折区' key='tow'>
//                             {
//                                 goodslist2.map(item => {
//                                     return <div className="goods" key={item.id}>
//                                         <Link to='/detail' state={{ id: item.id, type: 1 }}>
//                                             <div className="left">
//                                                 <img src={item.img} alt="" />
//                                             </div>
//                                             <div className="right">
//                                                 <span className='zhe'>7.9折</span>
//                                                 <p className='p1'>{item.goodsname}</p>
//                                                 <p className='pp'>{item.description}</p>
//                                                 <div className='p2'>
//                                                     <div className='div1'>
//                                                         <div className='div2'>直降198</div>
//                                                         <p>限购1件</p>
//                                                     </div>
//                                                     <div className="price">
//                                                         <div>
//                                                             <p>￥{item.price}</p>
//                                                             <del>￥{item.market_price}</del>
//                                                         </div>
//                                                         <div className="addshop">
//                                                             加入购物车
//                                                         </div>
//                                                     </div>
//                                                 </div>
//                                             </div>
//                                         </Link>
//                                     </div>
//                                 })
//                             }
//                         </CapsuleTabs.Tab>
//                         <CapsuleTabs.Tab title='时令水果' key='three'>
//                             {
//                                 goodslist3.map(item => {
//                                     return <div className="goods" key={item.id}>
//                                         <Link to='/detail' state={{ id: item.id, type: 1 }}>
//                                             <div className="left">
//                                                 <img src={item.img} alt="" />
//                                             </div>
//                                             <div className="right">
//                                                 <span className='zhe'>7.9折</span>
//                                                 <p className='p1'>{item.goodsname}</p>
//                                                 <p className='pp'>{item.description}</p>
//                                                 <div className='p2'>
//                                                     <div className='div1'>
//                                                         <div className='div2'>直降198</div>
//                                                         <p>限购1件</p>
//                                                     </div>
//                                                     <div className="price">
//                                                         <div>
//                                                             <p>￥{item.price}</p>
//                                                             <del>￥{item.market_price}</del>
//                                                         </div>
//                                                         <div className="addshop">
//                                                             加入购物车
//                                                         </div>
//                                                     </div>
//                                                 </div>
//                                             </div>
//                                         </Link>
//                                     </div>
//                                 })
//                             }
//                         </CapsuleTabs.Tab>
//                         <CapsuleTabs.Tab title='粮油调味' key='four'>
//                             {
//                                 goodslist4.map(item => {
//                                     return <div className="goods" key={item.id}>
//                                         <Link to='/detail' state={{ id: item.id, type: 1 }}>
//                                             <div className="left">
//                                                 <img src={item.img} alt="" />
//                                             </div>
//                                             <div className="right">
//                                                 <span className='zhe'>7.9折</span>
//                                                 <p className='p1'>{item.goodsname}</p>
//                                                 <p className='pp'>{item.description}</p>
//                                                 <div className='p2'>
//                                                     <div className='div1'>
//                                                         <div className='div2'>直降198</div>
//                                                         <p>限购1件</p>
//                                                     </div>
//                                                     <div className="price">
//                                                         <div>
//                                                             <p>￥{item.price}</p>
//                                                             <del>￥{item.market_price}</del>
//                                                         </div>
//                                                         <div className="addshop">
//                                                             加入购物车
//                                                         </div>
//                                                     </div>
//                                                 </div>
//                                             </div>
//                                         </Link>
//                                     </div>
//                                 })
//                             }
//                         </CapsuleTabs.Tab>
//                     </CapsuleTabs>
//                 </div>
//             </div >
//         )
//     }
// }


import { useState, useEffect } from 'react'
import '../assets/css/home.css'
import { CapsuleTabs, ProgressBar, Toast } from "antd-mobile"
import { getNew, getSeckill, getIndexgoods, getGroupon, cartadd } from "../request/api"
import { Link, useNavigate } from 'react-router-dom';
export default function Home() {
    const navigate = useNavigate();
    //新人专属
    let [getnew, setnew] = useState([])
    //秒杀
    let [getseckill, setseckill] = useState([])
    // 首页商品信息
    let [goodslist1, setgoods1] = useState([])
    let [goodslist2, setgoods2] = useState([])
    let [goodslist3, setgoods3] = useState([])
    let [goodslist4, setgoods4] = useState([])
    //万人团
    let [getgroupon, setgroupon] = useState([])

    useEffect(() => {
        //新人专属
        getNew().then(res => {
            // console.log(res, '新人专享');
            if (res.code === 200) {
                setnew(res.list)
            }
        })
        //秒杀
        getSeckill().then(res => {
            // console.log(res, '秒杀');
            if (res.code === 200) {
                setseckill(res.list)
            }
        })
        //首页商品信息
        getIndexgoods().then(res => {
            // console.log(res, '首页商品信息');
            if (res.code === 200) {
                setgoods1(res.list[0].content)
                setgoods2(res.list[1].content)
                setgoods3(res.list[2].content)
                setgoods4(res.list[3].content)
            }
        })
        // 万人团
        getGroupon().then(res => {
            // console.log(res, '万人团');
            if (res.code === 200) {
                setgroupon(res.list)
            }
        });
    }, [])
    function gocart(id, e) {
        e.preventDefault()
        cartadd({
            uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
            type: 1,
            goodsid: id,
            num: 1
        }).then((res) => {
            //    console.log(res);
            if (res.code === 200) {
                Toast.show({
                    content: res.msg,
                });
                console.log(res);
                navigate("/index/cart");
            }
        });
    }
    return (
        <div id='Home'>
            <header>
                <div className='header-top'>
                    <img src={require('../assets/images/logo.png')} alt="" />
                    <input type="text" className='iconfont' placeholder='&#xe6d1; 搜索商品' />
                    <div className="sousuo">
                        搜索
                    </div>
                    <i className='dingwei iconfont icon-position'></i>
                </div>
                <div className="header-bot">
                    <div className="top">
                        <h1>新人专属</h1>
                        <div>
                            <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
                        </div>
                        <span>查看全部 <i className='iconfont icon-arrow-right'></i> </span>
                    </div>
                    <div className="center">
                        <p>
                            <span>1重礼</span>
                            <span>信任特价商品专区</span>
                            <span>（限量供应，先到先得）</span>
                        </p>
                        <ul>
                            {
                                getnew.map(item => {
                                    return <li key={item.id}>
                                        <img src={item.img} alt="" />
                                        <div className="price">
                                            <div>
                                                <p>￥{item.price}</p>
                                                <del>￥{item.market_price}</del>
                                            </div>
                                            <div className="round iconfont icon-gouwuche"></div>
                                        </div>
                                    </li>
                                })
                            }

                        </ul>
                    </div>
                    <div className="bot">
                        <p>
                            <span>2重礼</span>
                            <span>新人通用50元礼券</span>
                            <span>（下单立减，省了又省）</span>
                        </p>
                        <img className='img1' src={require('../assets/images/已领取.png')} alt="" />
                        <img className='img2' src={require('../assets/images/下单后可得.png')} alt="" />
                    </div>
                </div>
            </header>
            <div className="header-bot1">
                <div className="top1">
                    <h1>万人团</h1>
                    <div>
                        <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
                    </div>
                    <span>查看全部 <i className='iconfont icon-arrow-right'></i> </span>
                </div>
                <div className="center1">
                    <p>
                        <span>万人团</span>
                        <span>信任特价商品专区</span>
                        <span>（限量供应，先到先得）</span>
                    </p>
                    <ul>
                        {
                            getgroupon.map(item => {
                                return <li key={item.id}>
                                    <Link to='/detail' state={{ id: item.id, type: 2, item: item }}>
                                        <img src={item.img} alt="" />
                                        <div className="price">
                                            <div>
                                                <p>￥{item.price}</p>
                                                <del>￥{item.market_price}</del>
                                            </div>
                                            <div className="round iconfont icon-gouwuche"></div>
                                        </div>
                                    </Link>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
            <div className="content">
                <div className="gird">
                    <ul>
                        <li>
                            <img src={require('../assets/images/限时抢购.png')} alt="" />
                            <p>限时秒杀</p>
                        </li>
                        <li>
                            <img src={require('../assets/images/畅销商品.png')} alt="" />
                            <p>畅销商品</p>
                        </li>
                        <li>
                            <img src={require('../assets/images/品质大牌.png')} alt="" />
                            <p>品质大牌</p>
                        </li>

                        <li>
                            <img src={require('../assets/images/小u自营.png')} alt="" />
                            <p>小U自营</p>
                        </li>
                        <li>
                            <img src={require('../assets/images/积分兑换.png')} alt="" />
                            <p>积分商城</p>
                        </li>

                    </ul>
                </div>
                <div className="super">
                    <div className="top">
                        <h1>超级秒杀</h1>
                        <div>
                            <span>05</span> <i>:</i><span>42</span> <i>:</i><span>47</span>
                        </div>
                    </div>
                    <div className="bot">
                        <div className="left">
                            <img src={require('../assets/images/分类4.png')} alt="" />
                        </div>
                        <div className="right">
                            <span className='zhe'>7.9折</span>
                            <p className='p1'>溪牧原山茶花洁面乳精选太行山最优质……</p>
                            <div className='p2'>
                                <ProgressBar
                                    percent={30}
                                    style={{
                                        '--fill-color': '#FF6243',
                                        '--track-color': '#FFBDAC',
                                    }}
                                />
                                <div className='sp2'>每人限购1件</div>
                            </div>
                            <div className="qiang">
                                <p>￥29.99</p>
                                <del>69.9</del>
                                <div className='msq'>
                                    馬上抢
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="center">
                    <p>
                        <span>限时秒杀</span>
                        <span>信任特价商品专区</span>
                        <span>（限量供应，先到先得）</span>
                    </p>
                    <ul>
                        {
                            getseckill.map(item => {
                                return <li key={item.id}>
                                    <img src={item.img} alt="" />
                                    <div className="price">
                                        <div>
                                            <p>￥{item.price}</p>
                                            <del>￥{item.market_price}</del>
                                        </div>
                                        <div className="round iconfont icon-gouwuche"></div>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
                <div className="pre">
                    <div className="pre-title">
                        <p>双11尖货预购</p>
                        <p>畅购全球</p>
                    </div>
                    <div className="pre-img">
                        <img src={require('../assets/images/双11.png')} alt="" />
                        <img src={require('../assets/images/畅购1.png')} alt="" />
                        <img src={require('../assets/images/畅购2.png')} alt="" />
                    </div>
                </div>
                <nav className="head-nav">
                    <ul>
                        <li>
                            <Link to='/catelist'>综合推荐</Link>
                        </li>
                        <li>销量</li>
                        <li>价格<i className='iconfont icon-jiage'></i></li>
                        <li>好评</li>
                        <li>店铺</li>
                        <li><i className="iconfont icon-gengduo1"></i>分类</li>
                    </ul>
                </nav>
                <CapsuleTabs className='cap'>
                    <CapsuleTabs.Tab title='热销好货' key='one'>
                        {
                            goodslist1.map(item => {
                                return <div className="goods" key={item.id}>
                                    <Link to='/detail' state={{ id: item.id, type: 1 }}>
                                        <div className="left">
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <span className='zhe'>7.9折</span>
                                            <p className='p1'>{item.goodsname}</p>
                                            <p className='pp'>{item.description}</p>
                                            <div className='p2'>
                                                <div className='div1'>
                                                    <div className='div2'>直降198</div>
                                                    <p>限购1件</p>
                                                </div>
                                                <div className="price">
                                                    <div>
                                                        <p>￥{item.price}</p>
                                                        <del>￥{item.market_price}</del>
                                                    </div>
                                                    <div className="addshop" onClick={gocart.bind(this, item.id)}>
                                                        加入购物车
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='折上折区' key='tow'>
                        {
                            goodslist2.map(item => {
                                return <div className="goods" key={item.id}>
                                    <Link to='/detail' state={{ id: item.id, type: 1 }}>
                                        <div className="left">
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <span className='zhe'>7.9折</span>
                                            <p className='p1'>{item.goodsname}</p>
                                            <p className='pp'>{item.description}</p>
                                            <div className='p2'>
                                                <div className='div1'>
                                                    <div className='div2'>直降198</div>
                                                    <p>限购1件</p>
                                                </div>
                                                <div className="price">
                                                    <div>
                                                        <p>￥{item.price}</p>
                                                        <del>￥{item.market_price}</del>
                                                    </div>
                                                    <div className="addshop" onClick={gocart.bind(this, item.id)}>
                                                        加入购物车
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='时令水果' key='three'>
                        {
                            goodslist3.map(item => {
                                return <div className="goods" key={item.id}>
                                    <Link to='/detail' state={{ id: item.id, type: 1 }}>
                                        <div className="left">
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <span className='zhe'>7.9折</span>
                                            <p className='p1'>{item.goodsname}</p>
                                            <p className='pp'>{item.description}</p>
                                            <div className='p2'>
                                                <div className='div1'>
                                                    <div className='div2'>直降198</div>
                                                    <p>限购1件</p>
                                                </div>
                                                <div className="price">
                                                    <div>
                                                        <p>￥{item.price}</p>
                                                        <del>￥{item.market_price}</del>
                                                    </div>
                                                    <div className="addshop" onClick={gocart.bind(this, item.id)}>
                                                        加入购物车
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='粮油调味' key='four'>
                        {
                            goodslist4.map(item => {
                                return <div className="goods" key={item.id}>
                                    <Link to='/detail' state={{ id: item.id, type: 1 }}>
                                        <div className="left">
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <span className='zhe'>7.9折</span>
                                            <p className='p1'>{item.goodsname}</p>
                                            <p className='pp'>{item.description}</p>
                                            <div className='p2'>
                                                <div className='div1'>
                                                    <div className='div2'>直降198</div>
                                                    <p>限购1件</p>
                                                </div>
                                                <div className="price">
                                                    <div>
                                                        <p>￥{item.price}</p>
                                                        <del>￥{item.market_price}</del>
                                                    </div>
                                                    <div className="addshop" onClick={gocart.bind(this, item.id)}>
                                                        加入购物车
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            })
                        }
                    </CapsuleTabs.Tab>
                </CapsuleTabs>
            </div>
        </div >
    )
}
